<template>
    <div class="my-message">
        <el-tabs v-model="current">
            <el-tab-pane label="详情" name="detail" />
        </el-tabs>
        <div class="msg-box mt-10" v-html="detail.msg">
            <!-- {{ detail.msg || "-" }} -->
        </div>
    </div>
</template>

<script>
    import {
        messageDetail
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                current: "detail", // 当前选中状态
                detail: {},
            };
        },

        mounted() {
            this.detail.id = this.$route.query.id
            this.getDetails(this.detail.id);
        },

        methods: {
            // 获取详情
            getDetails(id) {
                this.loading = true;
                let that = this
                messageDetail({
                    id
                }).then((response) => {
                    if(response.code == 200){
                        that.detail = response.data
                    }
                  
                    that.loading = false;
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .my-message {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);
        position: relative;

        .msg-box {
            word-break: break-all;
            line-height: 30px;
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>